<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>0044: Dialogs X - Customizing (3 of 3) - Fancy Content Area | gtkDcoding</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="0044: Dialogs X - Customizing (3 of 3) - Fancy Content Area" />
<meta name="author" content="Ron Tarrant" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="How to layout the Content Area of a custom GTK Dialog using basic design principals - a D-language tutorial." />
<meta property="og:description" content="How to layout the Content Area of a custom GTK Dialog using basic design principals - a D-language tutorial." />
<link rel="canonical" href="http://localhost:4000/posts/0044-custom-dialog-iii.html" />
<meta property="og:url" content="http://localhost:4000/posts/0044-custom-dialog-iii.html" />
<meta property="og:site_name" content="gtkDcoding" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2019-06-14T00:00:00-04:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="0044: Dialogs X - Customizing (3 of 3) - Fancy Content Area" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Ron Tarrant"},"dateModified":"2019-06-14T00:00:00-04:00","datePublished":"2019-06-14T00:00:00-04:00","description":"How to layout the Content Area of a custom GTK Dialog using basic design principals - a D-language tutorial.","headline":"0044: Dialogs X - Customizing (3 of 3) - Fancy Content Area","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/0044-custom-dialog-iii.html"},"url":"http://localhost:4000/posts/0044-custom-dialog-iii.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="../assets/main.css">
  <link rel="stylesheet" href="../css/style.css" /><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="gtkDcoding" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="../">gtkDcoding</a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="../about.html">About</a><a class="page-link" href="../index-reverse.html">Posts in Date Order</a><a class="page-link" href="../topics.html">Blog Posts by Topic</a></div>
      </nav></div>
</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
	<header class="post-header">
		<link rel="stylesheet" href="../css/font_size.css" />
		<link rel="stylesheet" href="../css/figure.css" />
		<link rel="stylesheet" href="../css/topics/dialog.css" />  <!-- sub in the tag/topic -->
		<link rel="stylesheet" href="../css/modal.css" />
		<link rel="stylesheet" href="../css/post.css" />
		<link rel="stylesheet" href="../css/mascot_effects.css" />

		
		
		<p class="post-meta">
		<time class="dt-published" datetime="2019-06-14T00:00:00-04:00" itemprop="datePublished">Friday, June 14, 2019
		</time>• by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">Ron Tarrant</span></span></p>
	</header>

	<div class="post-content e-content" itemprop="articleBody">
		<div class="skew-line"></div>
		<h1 id="0044-dialogs-x---customizing-3-of-3---fancy-content-area">0044: Dialogs X - Customizing (3 of 3)<br /> - Fancy Content Area</h1>

<p>A reminder…</p>

<p>This collection of topics is split up like this:</p>

<ul>
  <li><em><a href="./0042-custom-dialog-i.html">Part I</a></em> (the time before last) deals with how to create an aesthetically-pleasing widget layout for a custom <code class="language-plaintext highlighter-rouge">Dialog</code>,</li>
  <li><em><a href="./0043-custom-dialog-ii.html">Part II</a></em> (last time) covers user interaction, and</li>
  <li><em>Part III</em> (this time) brings it all together.</li>
</ul>

<p>As promised, this time around we talk about the <code class="language-plaintext highlighter-rouge">Dialog</code>’s <em>Content Area</em> and wrap up by rolling our own <em>Action Area</em> and <em>Content Area</em> together into a fully-fledged custom <code class="language-plaintext highlighter-rouge">Dialog</code>. However, since we went over <em>Action Area</em> stuff last time and this example is only different in a few small way, I’m not going to discuss it here except to say:</p>

<p>The <em>Action Area</em> used in this example uses an array of roll-yer-own <code class="language-plaintext highlighter-rouge">Button</code> <code class="language-plaintext highlighter-rouge">Label</code> text strings. ‘Nuff said. And now…</p>

<h2 id="the-content-area">The <em>Content Area</em></h2>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img0" src="../images/screenshots/013_dialogs/dialog_10.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal0" class="modal">																	<!-- modal# -->
				<span class="close0">&times;</span>															<!-- close# -->
				<img class="modal-content" id="img00" />															<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal0");														// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img0");															// img#
			var modalImg = document.getElementById("img00");													// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close0")[0];											// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img1" src="../images/screenshots/013_dialogs/dialog_10_term.png" alt="Current example terminal output" />		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal1" class="modal">																				<!-- modal# -->
				<span class="close1">&times;</span>																		<!-- close# -->
				<img class="modal-content" id="img11" />																		<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal1");																	// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img1");																		// img#
			var modalImg = document.getElementById("img11");																// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close1")[0];														// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																								<!-- ------------- filename (below) --------- -->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/013_dialogs/dialog_10_custom_content_area.d" target="_blank">here</a>.
	</div>
</div>

<p>The first thing to know about the <em>Content Area</em> is that it’s just an ordinary <code class="language-plaintext highlighter-rouge">Box</code> jammed into the top section of the <code class="language-plaintext highlighter-rouge">Dialog</code>. Knowing that, we just isolate the <code class="language-plaintext highlighter-rouge">Content Area</code> so we can address it directly, then treat it like any other <code class="language-plaintext highlighter-rouge">Box</code>. It takes a couple of steps to get there, but it works, so why not?</p>

<p>In the constructor, we instantiate the <code class="language-plaintext highlighter-rouge">Dialog</code>, then call a function named <code class="language-plaintext highlighter-rouge">farmOutContent()</code> to do the dirty work:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">this</span><span class="p">(</span><span class="n">Window</span> <span class="n">parentWindow</span><span class="p">)</span>
<span class="p">{</span>
	<span class="n">_parentWindow</span> <span class="p">=</span> <span class="n">parentWindow</span><span class="p">;</span>
	<span class="k">super</span><span class="p">(</span><span class="n">titleText</span><span class="p">,</span> <span class="n">_parentWindow</span><span class="p">,</span> <span class="n">flags</span><span class="p">,</span> <span class="n">buttonLabels</span><span class="p">,</span> <span class="n">responseTypes</span><span class="p">);</span>
	<span class="n">farmOutContent</span><span class="p">();</span>
	
	<span class="n">addOnResponse</span><span class="p">(&amp;</span><span class="n">doSomething</span><span class="p">);</span>
	<span class="n">run</span><span class="p">();</span>
	<span class="n">destroy</span><span class="p">();</span>
	
<span class="p">}</span> <span class="c1">// this()</span>
</code></pre></div></div>

<p>And here’s that farming function which really just gives us a convenient handle to grab our <code class="language-plaintext highlighter-rouge">Box</code> and hand it around:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kt">void</span> <span class="n">farmOutContent</span><span class="p">()</span>
<span class="p">{</span>
	<span class="c1">// FARM it out to AreaContent class</span>
	<span class="n">contentArea</span> <span class="p">=</span> <span class="n">getContentArea</span><span class="p">();</span>
	<span class="n">areaContent</span> <span class="p">=</span> <span class="k">new</span> <span class="n">AreaContent</span><span class="p">(</span><span class="n">contentArea</span><span class="p">);</span>
	
<span class="p">}</span> <span class="c1">// farmOutContent()</span>
</code></pre></div></div>

<p>It may seem redundant to have variables for both <code class="language-plaintext highlighter-rouge">areaContent</code> and <code class="language-plaintext highlighter-rouge">contentArea</code>, but keep in mind that one’s a <code class="language-plaintext highlighter-rouge">Box</code> and the other is a customized <code class="language-plaintext highlighter-rouge">ContentArea</code> object which contains that <code class="language-plaintext highlighter-rouge">Box</code> we grabbed from the the <code class="language-plaintext highlighter-rouge">Dialog</code>. The fact that we’re passing <code class="language-plaintext highlighter-rouge">contentArea</code> to the <code class="language-plaintext highlighter-rouge">AreaContent</code> class’s constructor is a dead giveaway. It’s the same technique we used for defining <em>Part I</em>’s <code class="language-plaintext highlighter-rouge">HPadBox</code>. And the <code class="language-plaintext highlighter-rouge">AreaContent</code> object wraps the handle.</p>

<p>And here’s where it all gets wrapped up in a nice, neat… um… object:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">AreaContent</span>
<span class="p">{</span>
	<span class="k">private</span><span class="p">:</span>
	<span class="n">Box</span> <span class="n">_contentArea</span><span class="p">;</span>
	<span class="n">PadGrid</span> <span class="n">_padGrid</span><span class="p">;</span> 
	
	<span class="k">public</span><span class="p">:</span>
	<span class="k">this</span><span class="p">(</span><span class="n">Box</span> <span class="n">contentArea</span><span class="p">)</span>
	<span class="p">{</span>
		<span class="n">_contentArea</span> <span class="p">=</span> <span class="n">contentArea</span><span class="p">;</span>
		<span class="n">_padGrid</span> <span class="p">=</span> <span class="k">new</span> <span class="n">PadGrid</span><span class="p">();</span>
		<span class="n">_contentArea</span><span class="p">.</span><span class="n">add</span><span class="p">(</span><span class="n">_padGrid</span><span class="p">);</span>
		<span class="n">_contentArea</span><span class="p">.</span><span class="n">showAll</span><span class="p">();</span>

	<span class="p">}</span> <span class="c1">// this()</span>
</code></pre></div></div>

<div class="inpage-frame">
	<figure class="left">
		<img src="../images/diagrams/013_dialog/dialog_10_grid_diagram.png" alt="Simple guide to laying out a dialog" style="size: 75%;" />
		<figcaption>
			Figure 1: A simple diagram for laying out a dialog
		</figcaption>
	</figure>
</div>

<p>The <code class="language-plaintext highlighter-rouge">_contentArea</code> property is defined as a <code class="language-plaintext highlighter-rouge">Box</code> (note that we don’t need to call <code class="language-plaintext highlighter-rouge">cast()</code> for this to work) and it gets assigned to the <code class="language-plaintext highlighter-rouge">Box</code> pointer passed into the constructor. The constructor goes on to create our padded <code class="language-plaintext highlighter-rouge">Grid</code> (the <code class="language-plaintext highlighter-rouge">PadGrid</code> class) and stuffs that into the <em>Content Area</em>.</p>

<p>And this is important: We have to call <code class="language-plaintext highlighter-rouge">_contentArea.showAll()</code> for the <code class="language-plaintext highlighter-rouge">Dialog</code> just as we do with a <code class="language-plaintext highlighter-rouge">MainWindow</code>. If we don’t, the <code class="language-plaintext highlighter-rouge">Dialog</code> will appear without its <em>Content Area</em>.</p>

<p>The <code class="language-plaintext highlighter-rouge">PadGrid</code> (see <a href="./0042-custom-dialog-i.html"><em>Part I</em></a> of this series if you haven’t already) has morphed into the <code class="language-plaintext highlighter-rouge">NewImageDataGrid</code> class (but only to support the paradigm present in the example) and contains all the bits and bobs for gathering data from the user. In this case, we’re gathering a file name, x and y dimensions, and the resolution of a new image to create. For the sake of brevity, I won’t reproduce the entire <code class="language-plaintext highlighter-rouge">NewImageDataGrid</code> here, but these are the properties it contains:</p>

<ul>
  <li>a <code class="language-plaintext highlighter-rouge">Label</code>, <code class="language-plaintext highlighter-rouge">Entry</code>, and <em>placeholder text</em> for the file name, and</li>
  <li>a name <code class="language-plaintext highlighter-rouge">Label</code>, <code class="language-plaintext highlighter-rouge">Entry</code>, <em>placeholder text</em>, and units <code class="language-plaintext highlighter-rouge">Label</code> for each of these:
    <ul>
      <li>width,</li>
      <li>height, and</li>
      <li>resolution.</li>
    </ul>
  </li>
</ul>

<p>And all that stuff is stored in these variables:</p>

<ul>
  <li><code class="language-plaintext highlighter-rouge">_filename</code>,</li>
  <li><code class="language-plaintext highlighter-rouge">_width</code>,</li>
  <li><code class="language-plaintext highlighter-rouge">_height</code>, and</li>
  <li><code class="language-plaintext highlighter-rouge">_resolution</code>.</li>
</ul>

<p>Naturally, the constructor takes all these properties, instantiates all the <code class="language-plaintext highlighter-rouge">Label</code>s and <code class="language-plaintext highlighter-rouge">Entry</code>s, then stuffs them into the super-class <code class="language-plaintext highlighter-rouge">Grid</code> while also using values from our <code class="language-plaintext highlighter-rouge">PadBoxJustify</code> <code class="language-plaintext highlighter-rouge">enum</code> to make things look nice.</p>

<p><em>Note: When using the <code class="language-plaintext highlighter-rouge">Grid</code>’s <code class="language-plaintext highlighter-rouge">attach()</code> function, the arguments are:</em></p>

<ul>
  <li><em><strong>child</strong> = the widget to add,</em></li>
  <li><em><strong>left</strong> = the column number to attach the <strong>left</strong> side of @child to,</em></li>
  <li><em><strong>top</strong> = the row number to attach the <strong>top</strong> side of @child to,</em></li>
  <li><em><strong>width</strong> = the <strong>number of columns</strong> that @child will span, and</em></li>
  <li><em><strong>height</strong> = the <strong>number of rows</strong> that @child will span.</em></li>
</ul>

<p>And like when we were dealing with menus, it’s always a good idea to draw a diagram of your <code class="language-plaintext highlighter-rouge">Grid</code> layout to more easily keep track of what’s going on.</p>

<p>And one function in the <code class="language-plaintext highlighter-rouge">NewImageDataGrid</code> will be of interest. It looks like this:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">Tuple</span><span class="p">!(</span><span class="nb">string</span><span class="p">,</span> <span class="kt">int</span><span class="p">,</span> <span class="kt">int</span><span class="p">,</span> <span class="kt">int</span><span class="p">)</span> <span class="n">getData</span><span class="p">()</span>
<span class="p">{</span>
	<span class="n">_filename</span> <span class="p">=</span> <span class="n">filenameEntry</span><span class="p">.</span><span class="n">getText</span><span class="p">();</span>
	<span class="n">_width</span> <span class="p">=</span> <span class="n">to</span><span class="p">!</span><span class="kt">int</span><span class="p">(</span><span class="n">widthEntry</span><span class="p">.</span><span class="n">getText</span><span class="p">());</span>
	<span class="n">_height</span> <span class="p">=</span> <span class="n">to</span><span class="p">!</span><span class="kt">int</span><span class="p">(</span><span class="n">heightEntry</span><span class="p">.</span><span class="n">getText</span><span class="p">());</span>
	<span class="n">_resolution</span> <span class="p">=</span> <span class="n">to</span><span class="p">!</span><span class="kt">int</span><span class="p">(</span><span class="n">resolutionEntry</span><span class="p">.</span><span class="n">getText</span><span class="p">());</span>
	
	<span class="c1">// build an associative array of user-supplied data</span>
	<span class="k">return</span><span class="p">(</span><span class="n">tuple</span><span class="p">(</span><span class="n">_filename</span><span class="p">,</span> <span class="n">_width</span><span class="p">,</span> <span class="n">_height</span><span class="p">,</span> <span class="n">_resolution</span><span class="p">));</span>
	
<span class="p">}</span> <span class="c1">// getData()</span>
</code></pre></div></div>

<p>What you’re looking at is some <em>D</em>-specific coolness. To get the user-supplied data out of the <code class="language-plaintext highlighter-rouge">Entry</code>s, we’re dealing with two kinds of data, a string and a handful of integers. We use <em>D</em>’s <code class="language-plaintext highlighter-rouge">Tuple(S, I, I, I)</code> construct to declare a mixed return value and <code class="language-plaintext highlighter-rouge">tuple()</code> to put it together before handing it to the <code class="language-plaintext highlighter-rouge">return()</code> statement.</p>

<p><em>Note: You can also return a mixed bag of variables using a <code class="language-plaintext highlighter-rouge">Variant</code> or <code class="language-plaintext highlighter-rouge">struct</code>. <a href="https://github.com/rontarrant/gtkd_demos/blob/master/interesting_stuff/class_array_struct_return.d">Here’s a short bit of example code showing all three: tuple, Variant, and struct</a>.</em></p>

<p>Using this as a model, you can grab any combination of mixed data from the user, package it up, and get it back to whatever caller needs it.</p>

<p>Now, let’s skip back to the <code class="language-plaintext highlighter-rouge">NewImageDialog</code>’s callback function… well, part of it, anyway…</p>

<h2 id="retrieving-the-user-supplied-data">Retrieving the User-supplied Data</h2>

<p>To handle the <code class="language-plaintext highlighter-rouge">Button</code>s in the action area, I set up a <code class="language-plaintext highlighter-rouge">switch()</code> statement inside the <code class="language-plaintext highlighter-rouge">doSomething()</code> callback. Here’s one relevant bit of that <code class="language-plaintext highlighter-rouge">switch</code>/<code class="language-plaintext highlighter-rouge">case</code> code. And for convenience, <a href="https://github.com/rontarrant/gtkd_demos/blob/master/013_dialogs/dialog_10_custom_content_area.d">here’s the entire file again if you don’t wanna scroll back up to the link</a>):</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">case</span> <span class="n">ResponseType</span><span class="p">.</span><span class="n">OK</span><span class="p">:</span>
	<span class="n">writeln</span><span class="p">(</span><span class="s">"Creating new image file with these specs:"</span><span class="p">);</span>
	
	<span class="k">foreach</span><span class="p">(</span><span class="n">item</span><span class="p">;</span> <span class="n">areaContent</span><span class="p">.</span><span class="n">getNewImageDataGrid</span><span class="p">.</span><span class="n">getData</span><span class="p">())</span>
	<span class="p">{</span>
		<span class="n">writeln</span><span class="p">(</span><span class="s">"data item: "</span><span class="p">,</span> <span class="n">item</span><span class="p">);</span>
		
	<span class="p">}</span>
	
<span class="k">break</span><span class="p">;</span>
</code></pre></div></div>

<p>If the user clicked on the <em>OK</em> button in the <em>Action Area</em>, we step through each item in the <code class="language-plaintext highlighter-rouge">tuple</code> returned by <code class="language-plaintext highlighter-rouge">getData()</code> and print it to the terminal. Naturally, you’d wanna do this differently in an application, perhaps more like this:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">writeln</span><span class="p">(</span><span class="s">"filename: "</span><span class="p">,</span> <span class="n">areaContent</span><span class="p">.</span><span class="n">getNewImageDataGrid</span><span class="p">.</span><span class="n">getData</span><span class="p">()[</span><span class="mi">0</span><span class="p">]);</span>
<span class="n">writeln</span><span class="p">(</span><span class="s">"width: "</span><span class="p">,</span> <span class="n">areaContent</span><span class="p">.</span><span class="n">getNewImageDataGrid</span><span class="p">.</span><span class="n">getData</span><span class="p">()[</span><span class="mi">1</span><span class="p">]);</span>
<span class="n">writeln</span><span class="p">(</span><span class="s">"height: "</span><span class="p">,</span> <span class="n">areaContent</span><span class="p">.</span><span class="n">getNewImageDataGrid</span><span class="p">.</span><span class="n">getData</span><span class="p">()[</span><span class="mi">2</span><span class="p">]);</span>
<span class="n">writeln</span><span class="p">(</span><span class="s">"resolution: "</span><span class="p">,</span> <span class="n">areaContent</span><span class="p">.</span><span class="n">getNewImageDataGrid</span><span class="p">.</span><span class="n">getData</span><span class="p">()[</span><span class="mi">3</span><span class="p">]);</span>
</code></pre></div></div>

<p>So you can work with the variables independently of each other.</p>

<h2 id="conclusion">Conclusion</h2>

<p>And that is it! You now have all the information you need to:</p>

<ul>
  <li>build a custom <code class="language-plaintext highlighter-rouge">Dialog</code>,</li>
  <li>populate it with <code class="language-plaintext highlighter-rouge">Widget</code>s,</li>
  <li>make everything look pretty, and</li>
  <li>retrieve user-supplied data for use in your application.</li>
</ul>

<p>May you have as much fun creating your own custom <code class="language-plaintext highlighter-rouge">Dialog</code>s as I did coming up with these examples and writing this mini-series around them.</p>

<p>And remember: <em>semper ubi sub-ubi</em>.</p>

<div class="blog-nav">
	<div style="float: left;">
		<a href="./0043-custom-dialog-ii.html">Previous: Dialog Action Area</a>
	</div>
	<div style="float: right;">
		<a href="./0045-split-a-window-into-panes.html">Next: Split a Window into Panes</a>
	</div>
</div>
<p>
	<h3></h3>
<div class="inpage-frame">
	<a href="https://github.com/sponsors/rontarrant">
		<BR>
		<BR>
		<B>Is this article useful? Educational? Entertaining, perhaps?</B>
		<BR>
		<figure class="left">
			<img src="../images/favorite_32.png" alt="Sponsorship heart" style="width: 32px; height: 32px;">
		</figure>
		You're free to accept or decline this invitation to become our newest sponsor.
	</a>
</div>
	<h4 class="comment-blurb"><B>Comments? Questions? Observations?</B></h4>
	<p>
		Did we miss a tidbit of information that would make this post even more informative? Let's talk about it in the comments.
	</p>
	<script src="https://utteranc.es/client.js"
		repo="rontarrant"
		issue-term="pathname"
		theme="github-light"
		crossorigin="anonymous"
		async>
	</script>
	<ul>
		<li> come on over to the <a href="https://forum.dlang.org/">D Language Forum</a> and look for one of the <i>gtkDcoding</i> announcement posts, </li>
		<li> drop by <a href="https://forum.gtkd.org/">the <i>GtkD Forum</i></a>,</li>
		<li> follow the link below to email me, or</li>
		<li> go to the	<a href="https://www.facebook.com">gtkDcoding Facebook page.</a></li>
	</ul>
</p>
<p> You can also subscribe <a href="/feed.xml">via RSS</a> so you won't miss anything. Thank you very much for dropping by.</p>
<p>&copy; Copyright 2025 Ron Tarrant </p>
</div>

	<a class="u-url" href="./0044-custom-dialog-iii.html" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">gtkDcoding</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Ron Tarrant</li><li><a class="u-email" href="mailto:gtkDcoding@gmail.com">gtkDcoding@gmail.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/rontarrant"><svg class="svg-icon"><use xlink:href="../assets/minima-social-icons.svg#github"></use></svg> <span class="username">rontarrant</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Simple examples of how to use GtkD to build GUI applications.</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
